<template>
    <div v-loading="loading">
        <el-card>
            <template #header>
                <div>编辑选项</div>
            </template>
            <!-- 插入表单 -->
            <el-form label-width="80px" :model="form" ref="editform" :rules="rules">
                <el-form-item label="选项名称" prop="itemname">
                    <el-input v-model="form.itemname"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editItemLogin">保存</el-button>
                    <el-button @click="$router.push({ name: 'ItemsIndex' })">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>

import { mapActions } from "vuex";
export default {
    props: ["id"],
    data() {
        return {
            loading: false,
            form: {
                itemname: ""
            },
            origin: {},
            rules: {
                itemname: [
                    {
                        required: true,
                        message: "选项名称不能为空",
                        trigger: "blur",
                    },
                    {
                        max: 18,
                        min: 2,
                        message: "2-18个字符",
                    },
                    // 自定义验证规则
                    // {
                    //     validator: (rule, value, cb) => {
                    //         if (/^\w{2,18}$/.test(value)) {
                    //             cb();
                    //         } else {
                    //             cb(new Error("选项名称必须2-18个字符"));
                    //         }
                    //     }
                    // },
                    // 验证：当用户名存在时，验证不通过
                    {
                        validator: async (rule, value, cb) => {
                            // 当修改的用户名与原用户名一样时，直接返回不验证
                            if (value === this.origin.itemname) {
                                return;
                            };
                            const { data } = await this.exist({
                                field: "itemname",
                                value,
                            });
                            if (data) {
                                cb(new Error("选项名称已存在"));
                            } else {
                                cb();
                            }
                        },
                        // 失去焦点时，再做验证
                        trigger: "blur",
                    },
                ],
            }
        }
    },
    async created() {
        await this.getItemLoading();
    },
    methods: {
        ...mapActions("items", ["editItem", "getItem", "exist"]),
        async getItemLoading() {
            this.loading = true;
            try {
                // 信息回填
                const { data } = await this.getItem(this.id);
                this.form.itemname = data.itemname;
                this.origin = { ...data }
            } catch (error) { }
            this.loading = false;
        },
        editItemLogin() {

            try {
                this.$refs.editform.validate(async (valid) => {
                    if (valid) {
                        this.loading = true;
                        try {
                            await this.editItem({
                                id: this.id,
                                data: { itemname: this.form.itemname },
                            });
                            this.$message.success("选项编辑成功！");
                            this.$router.push({ name: 'ItemsIndex' });
                        } catch (error) { }
                    }
                })
            } catch (error) {
                console.log(error);
            }
            this.loading = false;
        },
    }
}
</script>